<!-- 切换管理者组件 -->
<template>
	<custom-dialog
		v-model:visible="visibleModel"
		:title="dialogTitle"
		width="75%"
		@confirm="confirm"
	>
		<div class="changeManager">
			<div class="left">
				<header>
					<Form
						:formList="formList"
						v-model:modelFormData="modelFormData"
						@updateForm="updateForm"
					/>
				</header>
				<main>
					<ul v-if="memberList?.length">
						<li
							v-for="(item, index) in memberList"
							:key="index"
							@click="handelRow(index)"
						>
							<div class="info">
								<img :src="item?.avatar || '/icon/menu/avatar.png'" alt="" />
								<div>
									<span>{{ item.employeeName }}</span>
									<p>{{ item.departmentName }}</p>
								</div>
							</div>
							<el-checkbox-group v-model="checkList">
								<el-checkbox label="" :value="index" />
							</el-checkbox-group>
						</li>
					</ul>
					<div v-else class="empty">成员列表为空</div>
				</main>
			</div>
			<div class="right">
				<view v-if="type === '1'" class="origan">
					<div class="title">原管理者</div>
					<div class="info">
						<img src="/icon/menu/avatar.png" alt="" />
						<div>
							<span>{{ triggerInfo?.name }}</span>
							<!-- <el-radio-group v-model="radioStatus">
								<el-radio
									:value="value"
									v-for="({ label, value }, index) in userStatusList"
									:key="index"
									>{{ label }}
								</el-radio>
							</el-radio-group> -->
						</div>
					</div>
				</view>
				<div class="title">已选择</div>
				<view v-if="type === '1'" class="origan">
					<div class="info" v-if="managerChangeInfo">
						<img src="/icon/menu/avatar.png" alt="" />
						<div>
							<span>{{ managerChangeInfo?.employeeName }}</span>
						</div>
					</div>
				</view>
				<div class="list-wrap" v-if="type === '2'">
					<!-- 回显数据 -->
					<div
						class="info"
						v-for="(item, index) in triggerInfo ? [triggerInfo] : selectNewInfo"
						:key="index"
					>
						<img src="/icon/menu/avatar.png" alt="" />
						<div>
							<span>{{ item.name }}</span>
							<el-radio-group v-model="item.permissionLevel">
								<el-radio
									:value="value"
									v-for="({ label, value }, index) in userStatusList"
									:key="index"
									>{{ label }}
								</el-radio>
							</el-radio-group>
						</div>
					</div>
				</div>
			</div>
		</div>
	</custom-dialog>
</template>

<script setup lang="ts">
import Form from '@/components/customGmSearch/components/Form.vue'
import { userStorage } from '@/utils/storage'
import { getCompanyMemberList } from '@/api/company'
import {
	createParticipants,
	updateParticipants,
	updateManager,
} from '@/api/customer'
import { useRoute } from 'vue-router'
const route = useRoute()
const { employeeName } = userStorage.get()
const props = withDefaults(
	defineProps<{
		type: string //为1是管理者；2是参与者
		modelValue: string
		triggerInfo?: object
		visible: boolean
		dialogTitle?: string
	}>(),
	{
		dialogTitle: '',
		modelValue: '',
		visible: false,
	}
)
const checkList = ref([])
const modelValueView = computed(() =>
	props.modelValue
		? memberList.value.find((val) => val.id === props.modelValue)?.employeeName
		: employeeName
)
const emits = defineEmits<{
	'update:modelValue': [e: string]
	'update:visible': [e: boolean]
	refresh: []
}>()
const visibleModel = computed({
	get() {
		return props.visible
	},
	set(val) {
		emits('update:visible', val)
	},
})
// 确认关闭
const confirm = async () => {
	let data = {} as any
	if (props.type === '1') {
		data = await updateManager({
			customerId: route.query.id,
			managerId: managerChangeInfo.value.id,
		})
	} else {
		if (props.triggerInfo) {
			const { employeeId, permissionLevel } = props.triggerInfo as any
			data = await updateParticipants({
				id: employeeId,
				permissionLevel,
			})
		} else {
			data = await createParticipants({
				participants: selectNewInfo.value.map((val) => {
					val.partyId = route.query.id
					return val
				}),
			})
		}
	}

	if (data.code === 200) {
		emits('update:visible', false)
		emits('refresh')
	}
	// selectNewInfo.value && emits('update:modelValue', selectNewInfo.value.id)
}
// 表单更新
const formList = [
	{
		type: 'select',
		props: 'departmentId',
		set: {
			placeholder: '请选择部门',
		},
		options: JSON.parse(localStorage.getItem('departmentList')),
	},
	{
		type: 'searchInput',
		props: 'keyword',
		set: {
			placeholder: '搜索成员姓名',
		},
	},
]
const modelFormData = reactive({
	departmentId: '',
	keyword: '',
	roupId: '',
	enterpriseId: userStorage.get().enterpriseId,
})
const memberList = ref([])
const radioActive = ref(null) //列表勾选
const radioStatus = ref(1) //单选状态
const userStatusList = [
	{ label: '可编辑', value: 'EDIT' },
	{ label: '可阅读', value: 'READ' },
]
// 获取成员列表
const getMemberList = async () => {
	try {
		const {
			code,
			data: res,
			message,
		} = await getCompanyMemberList(modelFormData)
		if (code === 200) {
			const list = res as Array<any>
			if (list.length > 0) {
				memberList.value = list
			} else {
				memberList.value = []
			}
		} else {
			memberList.value = []
		}
	} catch (error) {
		memberList.value = []
	}
}
onMounted(() => {
	getMemberList()
})
const updateForm = () => {
	getMemberList()
}
const selectNewInfo = ref([])
const managerChangeInfo = ref(null)
const handelRow = (index: number) => {
	if (props.type === '1') {
		checkList.value = [index]
		managerChangeInfo.value = memberList.value[index]
	} else {
		if (checkList.value.some((item) => item === index)) {
			console.log(index, checkList.value)
			const findIndex = checkList.value.findIndex((val) => val === index)
			if (findIndex !== -1) {
				checkList.value.splice(findIndex, 1)
			}
		} else {
			checkList.value.push(index)
		}
		selectNewInfo.value = checkList.value.map((val) => {
			return {
				name: memberList.value[val].employeeName,
				permissionLevel: 'EDIT',
				departmentId: memberList.value[val].departmentId,
				employeeId: memberList.value[val].id,
			}
		})
	}

	// selectNewInfo.value = memberList.value[index]
}
</script>

<style scoped lang="less">
.info {
	display: flex;
	align-items: center;
	> img {
		width: 50px;
		height: 50px;
		border-radius: 50px;
		margin-right: 28px;
	}
	span {
		font-weight: 500;
		font-size: 16px;
		color: #000000;
	}
	p {
		font-weight: 400;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.85);
	}
	> div {
		display: flex;
		flex-direction: column;
	}
}
.tagChange {
	display: flex;
	flex-grow: 1;
	height: 100%;
	justify-content: flex-end;
}
.changeManager {
	padding: 15px;
	display: flex;
	width: 100%;
	max-height: 500px;
	height: 500px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	.left,
	.right {
		width: 50%;
		.title {
			font-weight: 400;
			font-size: 16px;
			color: #000000;
		}
	}
	.left {
		header {
			height: 60px;
		}
		main {
			height: calc(100% - 60px);
			ul {
				height: 100%;
				overflow: auto;
				li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgba(0, 0, 0, 0.06);
					&:not(:last-child) {
						margin-bottom: 15px;
					}
				}
			}
		}
	}
	.right {
		border-left: 1px solid rgba(0, 0, 0, 0.06);
		margin-left: 5px;
		padding: 15px;
		height: 100%;
		display: flex;
		flex-direction: column;
		.origan {
			margin-bottom: 20px;
		}
		.list-wrap {
			flex-grow: 1;
			overflow-y: auto;
		}
		.title {
			margin-bottom: 10px;
		}
	}
}
.empty {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #dcdfe6;
	font-weight: normal;
}
</style>
